<template>
  <div class="rounded border border-solid border-color-split" :class="{ 'border-red-400': errMes }">
    <div class="px-4 py-3 bg-header cursor-pointer flex flex-row items-center">
      <div class="flex-1" @click="collapsed = !collapsed">
        <span class="text-xl text-color-header mr-2 font-semibold">
          {{ title }}
        </span>
        <span v-if="required" class="text-red-400">*</span>
        <Icon
          :type="collapsed ? 'icon-caret-up' : 'icon-caret-down'"
          class="!text-color-secondary"
          :class="{ 'ml-2': required }"
        />
        <span v-if="errMes" class="text-red-400 ml-3">
          {{ errMes }}
        </span>
      </div>
      <slot name="extraTitle" />
    </div>
    <div v-show="!collapsed" class="bg-white py-7 px-8 md:px-20" :class="bodyClass">
      <slot />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import Icon from "/@/components/Icon.vue";
defineProps<{
  title: string;
  required?: boolean;
  bodyClass?: string;
  errMes?: string;
}>();
const collapsed = ref(false);
</script>
